<template lang="html">
    <div class="">
        <h3>跨域</h3>
        <p>1.安装axios异步请求的模块</p>
        <p>cnpm install axios vue-axios -D</p>
        <hr>
        <p>2.修改config/index.js</p>
        <p>
            proxyTable: { <br>
              '/api': {<br>
                target: 'http://api.douban.com/',<br>
                changeOrigin: true,<br>
                pathRewrite: {<br>
                  '^/api': '/'<br>
                }<br>
                }<br>
            },<br>
        </p>
        <hr>
        <p>3.使用axios获取数据</p>
        <p>
            getData() { <br>
    			this.axios({ <br>
    				url: '/api/v2/movie/in_theaters', <br>
    				method: 'get' <br>
    			}).then((res) => { <br>
    				this.movieList = res.data.subjects; <br>
    			}) <br>
    		} <br>
        </p>


        <button type="button" class="btn btn-success" @click="getData()" name="button">获取数据</button>
        <div class="">
            <div class="row">
              <div class="col-sm-3 col-md-3" v-for="m in movieList">
                <div class="thumbnail">
                  <img class="poster" :src="m.images.large" alt="...">
                  <div class="caption">
                    <h5>{{m.title}}</h5>

                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
		return {
			movieList: []
		}
	},
	methods: {
		getData() {
			this.axios({
				url: '/api/v2/movie/in_theaters?start=20&count=5',
				method: 'get',
				// headers: {
				// 	'Content-Type': 'application/json'
				// }
			}).then((res) => {
				this.movieList = res.data.subjects;
			})
		}
	}
}
</script>

<style lang="css">
.poster{
    max-height:206px;
}
</style>
